<template>
       <div class="breadCrumd">
        <router-link :to="{name:item.name}" v-for="item in data" :key="item.name ">{{item.meta.name+separator}}</router-link> 
     
    </div>
</template>
<script setup>
import {toRefs,watchEffect } from 'vue';

let props=defineProps({
    data:{
        type:Array,
        default(){
            return []
        }
    },
    separator:{
        type:String,
        default(){
            return "/"
        }
    }
})
console.log(props)

//监听
watchEffect(()=>{
    console.log(props.data)
})

let {data,separator} =toRefs(props)
console.log(props)

</script>
<style scoped>
    .breadCrumd{
        border: 1px solid #ccc;
        margin: 10px 0;
    }
    .breadCrumd a{
        margin: 0 5px;
        font-size: 20px;
        color:purple;
    }




</style>